<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="A fully featured admin theme which can be used to build CRM, CMS, etc.">
        <meta name="author" content="Coderthemes">

        <link rel="shortcut icon" href="assets/images/favicon_1.ico">

        <title>Ubold - Responsive Admin Dashboard Template</title>

        <link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
        <link href="assets/css/icons.css" rel="stylesheet" type="text/css" />
        <link href="assets/css/style.css" rel="stylesheet" type="text/css" />

        <script src="assets/js/modernizr.min.js"></script>


    </head>


    <body class="fixed-left" id="do-nicescrol">
        <!-- Page-Title -->
        <div class="row">
            <div class="col-sm-12">
                <div class="btn-group pull-right m-t-15">
                    <button type="button" class="btn btn-default dropdown-toggle waves-effect waves-light" data-toggle="dropdown" aria-expanded="false">Settings</button>
                    <div class="dropdown-menu dropdown-menu-right" aria-labelledby="btnGroupDrop1">
                        <a class="dropdown-item" href="ui-bootstrap.html#">Dropdown One</a>
                        <a class="dropdown-item" href="ui-bootstrap.html#">Dropdown Two</a>
                        <a class="dropdown-item" href="ui-bootstrap.html#">Dropdown Three</a>
                        <a class="dropdown-item" href="ui-bootstrap.html#">Dropdown Four</a>
                    </div>
                </div>

                <h4 class="page-title">Bootstrap-Elements</h4>
               <p class="text-muted page-title-alt">欢迎来到Ubold管理面板 !</p>

            </div>
        </div>


        <div class="row">
            <div class="col-sm-12">
                <div class="card-box">
                    <div class="row">

                        <!-- Popovers -->
                        <div class="col-md-6">
                            <h4 class="m-t-0 header-title"><b>Popovers</b></h4>
                            <p class="text-muted m-b-30 font-13">
                                内容的小叠加（如iPad上的内容）添加到任何用于容纳辅助信息的元素。
                            </p>

                            <div class="button-list">
                                <button type="button" class="btn btn-default" data-container="body" title="" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." data-original-title="">
                                    Popover在上
                                </button>

                                <button type="button" class="btn btn-default" data-container="body" title="" data-toggle="popover" data-placement="bottom" data-content="Vivamus
								sagittis lacus vel augue laoreet rutrum faucibus." data-original-title="">
                                    Popover 在下
                                </button>

                                <button type="button" class="btn btn-default" data-container="body" title="" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." data-original-title="">
                                    Popover在右
                                </button>

                                <button type="button" class="btn btn-default" data-container="body" title="" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." data-original-title="Popover title">
                                    Popover在左
                                </button>

                                <button tabindex="0" class="btn btn-default" role="button" data-toggle="popover" data-trigger="focus" title="" data-content="And here's some amazing content. It's very engaging. Right?" data-original-title="Dismissible popover">
                                    允许 popover
                                </button>
                            </div>
                        </div>
                        <!-- end col -->


                        <!-- Tooltips -->
                        <div class="col-md-6">
                            <h4 class="m-t-0 header-title"><b>提示</b></h4>
                            <p class="text-muted m-b-30 font-13">
                                有四个选项可用: top, right, bottom, and left aligned.
                            </p>

                            <div class="button-list">
                                <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">工具提示在左边</button>

                                <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="" data-original-title="Tooltip on top">工具提示在上面</button>

                                <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="Tooltip on bottom">工具提示底部</button>

                                <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="" data-original-title="Tooltip on right">工具提示正确</button>
                            </div>
                        </div>
                        <!-- end col -->

                    </div> <!-- end row -->
                </div> <!-- end card-box -->
            </div> <!-- end col -->
        </div>
        <!-- end row -->



        <div class="row">
            <div class="col-sm-12">
                <div class="card-box">
                    <div class="row">

                        <!-- Labels -->
                        <div class="col-md-6">
                            <h4 class="m-t-0 header-title"><b>标签</b></h4>
                            <p class="text-muted m-b-30 font-13">
                                添加任何默认提到的修饰符类来更改标签的外观
                            </p>

                            <div class="">
                                <span class="label label-default">Default</span>
                                <span class="label label-primary">Primary</span>
                                <span class="label label-success">Success</span>
                                <span class="label label-info">Info</span>
                                <span class="label label-warning">Warning</span>
                                <span class="label label-danger">Danger</span>
                                <span class="label label-purple">Purple</span>
                                <span class="label label-inverse">Inverse</span>
                                <span class="label label-pink">Pink</span>
                            </div>
                        </div>
                        <!-- end col -->


                        <!-- Badge -->
                        <div class="col-md-6">
                            <h4 class="m-t-0 header-title"><b>徽章</b></h4>
                            <p class="text-muted m-b-30 font-13">
                                有四个选项可用：顶部，右侧，底部和左侧对齐.
                            </p>

                            <div class="">
                                <span class="badge badge-primary">15</span>
                                <span class="badge badge-success">0</span>
                                <span class="badge badge-info">21</span>
                                <span class="badge badge-inverse">3</span>
                                <span class="badge badge-warning">35</span>
                                <span class="badge badge-danger">32</span>
                                <span class="badge badge-purple">51</span>
                                <span class="badge badge-pink">77</span>
                                <span class="badge">9</span>
                            </div>
                        </div>
                        <!-- end col -->

                    </div> <!-- end row -->
                </div> <!-- end card-box -->
            </div> <!-- end col -->
        </div>
        <!-- end row -->



        <div class="row">
            <div class="col-sm-12">
                <div class="card-box">
                    <div class="row">

                        <!-- Standard Alert -->
                        <div class="col-md-6">
                            <h4 class="m-t-0 header-title"><b>标准警报t</b></h4>
                            <p class="text-muted m-b-30 font-13 m-h-40">
                                包装任何文本和一个可选的解雇按钮 <code>.alert</code> 和四个上下文类之一（例如., <code>.alert-success</code>) 基本警报消息.
                            </p>

                            <div class="alert alert-success">
                                <strong>Well done!</strong> You successfully read this important alert message.
                            </div>
                            <div class="alert alert-info">
                                <strong>Heads up!</strong> This alert needs your attention, but it's not super important.
                            </div>
                            <div class="alert alert-warning">
                                <strong>Warning!</strong> Better check yourself, you're not looking too good.
                            </div>
                            <div class="alert alert-danger">
                                <strong>Oh snap!</strong> Change a few things up and try submitting again.
                            </div>

                            <div class="alert alert-success fade show m-b-0">
                                <h4>Big one!</h4>
                                <p>
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.
                                </p>
                                <p>
                                    <button type="button" class="btn btn-default waves-effect waves-light">
                                        Wanna do this
                                    </button>
                                    <button type="button" class="btn btn-white waves-effect">
                                        Or do this
                                    </button>
                                </p>
                            </div>

                        </div>
                        <!-- end col -Standard Alert -->

                        <div class="col-md-6">
                            <h4 class="m-t-0 header-title"><b>通过添加可选</b></h4>
                            <p class="text-muted m-b-30 font-13 m-h-40">
                                通过添加可选 <code>.alert-dismissible</code> 和关闭按钮来构建任何警报.
                            </p>

                            <div class="alert alert-success alert-dismissable">
                                <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                                Lorem ipsum dolor sit amet, consectetur adipisicing elit. <a href="ui-bootstrap.html#" class="alert-link">Alert Link</a>.
                            </div>
                            <div class="alert alert-info alert-dismissable">
                                <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                                Lorem ipsum dolor sit amet, consectetur adipisicing elit. <a href="ui-bootstrap.html#" class="alert-link">Alert Link</a>.
                            </div>
                            <div class="alert alert-warning alert-dismissable">
                                <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                                Lorem ipsum dolor sit amet, consectetur adipisicing elit. <a href="ui-bootstrap.html#" class="alert-link">Alert Link</a>.
                            </div>
                            <div class="alert alert-danger alert-dismissable">
                                <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                                Lorem ipsum dolor sit amet, consectetur adipisicing elit. <a href="ui-bootstrap.html#" class="alert-link">Alert Link</a>.
                            </div>

                            <div class="alert alert-info fade show m-b-0">
                                <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                                <h4>Big one!</h4>
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.</p>
                                <p>
                                    <button type="button" class="btn btn-info waves-effect waves-light">Wanna do this</button>
                                    <button type="button" class="btn btn-white waves-effect">Or do this</button>
                                </p>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
        <!-- End row -->


        <div class="row">
            <div class="col-sm-12">
                <div class="card-box">
                    <div class="row">

                        <!-- Pagination -->
                        <div class="col-lg-6">
                            <h4 class="m-t-0 header-title">分页</h4>
                            <p class="text-muted m-b-30 font-13">
                                为您的网站或应用程序提供多页分页组件的分页链接。
                            </p>

                            <div>
                                <h6 class="m-b-5">默认分页</h6>
                                <p class="text-muted font-13">
                                    简单的分页灵感来自Rdio，适用于应用和搜索结果.
                                </p>
                                <nav>
                                    <ul class="pagination">
                                        <li class="page-item">
                                            <a class="page-link" href="ui-bootstrap.html#" aria-label="Previous">
                                                <span aria-hidden="true">&laquo;</span>
                                                <span class="sr-only">Previous</span>
                                            </a>
                                        </li>
                                        <li class="page-item"><a class="page-link" href="ui-bootstrap.html#">1</a></li>
                                        <li class="page-item"><a class="page-link" href="ui-bootstrap.html#">2</a></li>
                                        <li class="page-item"><a class="page-link" href="ui-bootstrap.html#">3</a></li>
                                        <li class="page-item"><a class="page-link" href="ui-bootstrap.html#">4</a></li>
                                        <li class="page-item"><a class="page-link" href="ui-bootstrap.html#">5</a></li>
                                        <li class="page-item">
                                            <a class="page-link" href="ui-bootstrap.html#" aria-label="Next">
                                                <span aria-hidden="true">&raquo;</span>
                                                <span class="sr-only">Next</span>
                                            </a>
                                        </li>
                                    </ul>
                                </nav>

                                <div class="m-b-5"></div>

                                <h6 class="m-b-5">拆分分页</h6>
                                <p class="text-muted font-13">
                                    L链接通过添加一个类来相互拆分<code>
                                    .pagination-split</code>
                                </p>
                                <nav>
                                    <ul class="pagination pagination-split">
                                        <li class="page-item">
                                            <a class="page-link" href="ui-bootstrap.html#" aria-label="Previous">
                                                <span aria-hidden="true">&laquo;</span>
                                                <span class="sr-only">Previous</span>
                                            </a>
                                        </li>
                                        <li class="page-item"><a class="page-link" href="ui-bootstrap.html#">1</a></li>
                                        <li class="page-item active"><a class="page-link" href="ui-bootstrap.html#">2</a></li>
                                        <li class="page-item"><a class="page-link" href="ui-bootstrap.html#">3</a></li>
                                        <li class="page-item"><a class="page-link" href="ui-bootstrap.html#">4</a></li>
                                        <li class="page-item"><a class="page-link" href="ui-bootstrap.html#">5</a></li>
                                        <li class="page-item">
                                            <a class="page-link" href="ui-bootstrap.html#" aria-label="Next">
                                                <span aria-hidden="true">&raquo;</span>
                                                <span class="sr-only">Next</span>
                                            </a>
                                        </li>
                                    </ul>
                                </nav>

                                <div class="m-b-5"></div>

                                <h6 class="m-b-5">尺寸</h6>
                                <p class="text-muted font-13">
                                    添加  <code>
                                    .pagination-lg</code>
                                     或 <code>
                                    .pagination-sm</code>
                                   额外的尺寸
                                </p>
                                <nav>
                                    <ul class="pagination pagination-lg m-b-0">
                                        <li class="page-item">
                                            <a class="page-link" href="ui-bootstrap.html#" aria-label="Previous">
                                                <span aria-hidden="true">&laquo;</span>
                                                <span class="sr-only">Previous</span>
                                            </a>
                                        </li>
                                        <li class="page-item"><a class="page-link" href="ui-bootstrap.html#">1</a></li>
                                        <li class="page-item"><a class="page-link" href="ui-bootstrap.html#">2</a></li>
                                        <li class="page-item"><a class="page-link" href="ui-bootstrap.html#">3</a></li>
                                        <li class="page-item">
                                            <a class="page-link" href="ui-bootstrap.html#" aria-label="Next">
                                                <span aria-hidden="true">&raquo;</span>
                                                <span class="sr-only">Next</span>
                                            </a>
                                        </li>
                                    </ul>
                                </nav>

                                <h6 class="m-b-5">Alignment</h6>
                                <p class="text-muted font-13">
                                    在导航层次结构中指示当前页面的位置
                                </p>

                                <nav aria-label="Page navigation example">
                                    <ul class="pagination justify-content-center">
                                        <li class="page-item disabled">
                                            <a class="page-link" href="ui-bootstrap.html#" tabindex="-1">Previous</a>
                                        </li>
                                        <li class="page-item"><a class="page-link" href="ui-bootstrap.html#">1</a></li>
                                        <li class="page-item"><a class="page-link" href="ui-bootstrap.html#">2</a></li>
                                        <li class="page-item"><a class="page-link" href="ui-bootstrap.html#">3</a></li>
                                        <li class="page-item">
                                            <a class="page-link" href="ui-bootstrap.html#">Next</a>
                                        </li>
                                    </ul>
                                </nav>

                                <nav aria-label="Page navigation example">
                                    <ul class="pagination justify-content-end">
                                        <li class="page-item disabled">
                                            <a class="page-link" href="ui-bootstrap.html#" tabindex="-1">Previous</a>
                                        </li>
                                        <li class="page-item"><a class="page-link" href="ui-bootstrap.html#">1</a></li>
                                        <li class="page-item"><a class="page-link" href="ui-bootstrap.html#">2</a></li>
                                        <li class="page-item"><a class="page-link" href="ui-bootstrap.html#">3</a></li>
                                        <li class="page-item">
                                            <a class="page-link" href="ui-bootstrap.html#">Next</a>
                                        </li>
                                    </ul>
                                </nav>

                            </div>
                        </div>
                        <!-- end col -->

                        <!-- Pagers -->
                        <div class="col-lg-6">
                            <h4 class="m-t-0 header-title"><b>Breadcrumb</b></h4>
                            <p class="text-muted m-b-30 font-13">
                                Indicate the current page’s location within a navigational hierarchy.
                            </p>

                            <div>
                                <ol class="breadcrumb m-b-20">
                                    <li class="breadcrumb-item active">Home</li>
                                </ol>
                                <ol class="breadcrumb m-b-20">
                                    <li class="breadcrumb-item"><a href="ui-bootstrap.html#">Home</a></li>
                                    <li class="breadcrumb-item active">Library</li>
                                </ol>
                                <ol class="breadcrumb m-b-20">
                                    <li class="breadcrumb-item"><a href="ui-bootstrap.html#">Home</a></li>
                                    <li class="breadcrumb-item"><a href="ui-bootstrap.html#">Library</a></li>
                                    <li class="breadcrumb-item active">Data</li>
                                </ol>
                            </div>
                        </div>
                        <!-- end col -->


                    </div>
                </div>
            </div>
        </div>
        <!-- End row -->




        <script>
            var resizefunc = [];
        </script>

        <!-- jQuery  -->
        <script src="assets/js/jquery.min.js"></script>
        <script src="assets/js/popper.min.js"></script><!-- Popper for Bootstrap -->
        <script src="assets/js/bootstrap.min.js"></script>
        <script src="assets/js/detect.js"></script>
        <script src="assets/js/fastclick.js"></script>
        <script src="assets/js/jquery.slimscroll.js"></script>
        <script src="assets/js/jquery.blockUI.js"></script>
        <script src="assets/js/waves.js"></script>
        <script src="assets/js/wow.min.js"></script>
        <script src="assets/js/jquery.nicescroll.js"></script>
        <script src="assets/js/jquery.scrollTo.min.js"></script>

        <script src="assets/js/jquery.core.js"></script>
        <script src="assets/js/jquery.app.js"></script>

    </body>
</html>